<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style> /* 练习 1.圆形   2.正三角形
				  思路:宽高与边框倒角一致
				  思路2:div#triangle   css中:抓到div
				            左边框 50像素实线红色 
				            右边框 50像素实线黄色
				            下边框 50像素实线黑色
				  注意: 先别加宽高 transparent透明色
				  */
				div#circle{
					width: 400px;
					height: 400px;
					border: 1px solid lightpink ;
					border-radius: 50%;
					 /* 边框阴影 box-shadow 属性 */
					 box-shadow: 5px 5px 50px 50px lightpink inset;
				} 
				div#triangle{
					width: 0px;
					/* border-left: 50px solid transparent;
					border-right: 50px solid transparent;
					border-bottom: 50px solid black; */
					/* 两行 倒三角 蓝色 透明度.3
					提醒：所有边框：50px solid transparent
					      上边框颜色改成蓝色 0，0，255
					*/
					border: 50px solid transparent;
					border-right-color: rgba(0, 0, 255,.3);				
					}
				/* outline 边框轮廓 只针对input 元素 */
				input{
					outline: 1px solid lightpink;
				}
				/* 实际应用：通配选择器 去掉轮廓
				 {outline: 0;}
				 */
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>